<ui:composition template="/template/templateSGRUsuario.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">
    <ui:param name="param" value="login"/>
    <ui:define name="index">

        <h:form id="login#{param}" >
            <p:defaultCommand target="pp" />
            <article id="content">
                <div class="wrap">
                    <div class="box">
                        <div>
                            <h2 class="letter_spacing">Inicia <span>Sesión en Deliccio</span></h2>

                            <div class="field-set">

                                <p:growl id="msg#{param}" showDetail="false" autoUpdate="true" />

                                <p:focus context="login#{param}"/>

                                <h:panelGrid columns="2" id="panel#{param}" styleClass="grid-modal" >

                                    <h:outputLabel value="Usuario:"/>
                                    <h:column>
                                        <p:inputText size="30" id="nombreUsuario#{param}" tabindex="1" value="#{sesion.nombreUsuario}" maxlength="40" required="true" requiredMessage="El campo Usuario es obligatrio"/>
                                    </h:column>

                                    <h:outputLabel value="Contrase&#241;a:" />
                                    <h:column>
                                        <p:password size="30" id="contrasenia#{param}" tabindex="2" value="#{sesion.contrasenia}" required="true" label="Contrase&#241;a" requiredMessage="El campo Contrase&#241;a es obligatrio"/>  
                                    </h:column>

                                </h:panelGrid>

                                <div style="margin-top: 30px;margin-left:90px">
                                    <p:commandLink id="pp" update="msg#{param} panel#{param}" 
                                                   actionListener="#{sesion.login()}" ajax="false"
                                                   style="margin-right:20px;" styleClass="button1" tabindex="3">  
                                        <h:outputText value="Ingresar" />  
                                    </p:commandLink>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </article>

        </h:form>
    </ui:define>
    <ui:define name="contenido">
        <article id="content2">
            <div class="wrapper">
                <section class="pad_left1">
                    <div class="wrapper">
                        <div class="cols">
                            <h2>¿No tienes cuenta?</h2>
                        </div>
                        <div class="col3 pad_left1">
                            <h2>¿Olvidaste tu contraseña?</h2>
                        </div>
                    </div>
                    <div class="line1">
                        <div class="wrapper line2">
                            <div class="cols">
                                <div class="wrapper pad_bot1">
                                    <h:form>
                                        <p><p:commandLink id="cuenta" action="crearCuenta" immediate="true" value="Crea tu cuenta ahora mismo!!"/> En pocos pasos tendrás tu usuario y podrás reservar tu mesa, hacer pedidos a domicilio y mucho más. </p>
                                    </h:form>
                                </div>
                            </div>
                            <div class="col3 pad_left1">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                </p>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </article>
    </ui:define>
</ui:composition>